<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Scrollspy component - UIkit documentation</title>
        <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
        <link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon.png">
        <link id="data-uikit-theme" rel="stylesheet" href="css/uikit.docs.min.css">
        <link rel="stylesheet" href="css/docs.css">
        <link rel="stylesheet" href="../vendor/highlight/highlight.css">
        <script src="../vendor/jquery.js"></script>
        <script src="js/uikit.min.js"></script>
        <script src="../vendor/highlight/highlight.js"></script>
        <script src="js/docs.js"></script>
    </head>

    <body class="tm-background">

        <nav class="tm-navbar uk-navbar uk-navbar-attached">
            <div class="uk-container uk-container-center">

                <a class="uk-navbar-brand uk-hidden-small" href="../index.html"><img class="uk-margin uk-margin-remove" src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>

                <ul class="uk-navbar-nav uk-hidden-small">
                    <li><a href="documentation_get-started.html">Get Started</a></li>
                    <li class="uk-active"><a href="core.html">Core</a></li>
                    <li><a href="components.html">Components</a></li>
                    <li><a href="customizer.html">Customizer</a></li>
                    <li><a href="../showcase/index.html">Showcase</a></li>
                    <li><a href="tutorials.html">Tutorials</a></li>
                </ul>

                <a href="#tm-offcanvas" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>

                <div class="uk-navbar-brand uk-navbar-center uk-visible-small"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></div>

            </div>
        </nav>

        <div class="tm-middle">
            <div class="uk-container uk-container-center">

                <div class="uk-grid" data-uk-grid-margin>
                    <div class="tm-sidebar uk-width-medium-1-4 uk-hidden-small">

                        <ul class="tm-nav uk-nav" data-uk-nav>

                            <li class="uk-nav-header">Defaults</li>
                            <li><a href="base.html">Base</a></li>
                            <li><a href="print.html">Print</a></li>

                            <li class="uk-nav-header">Layout</li>
                            <li><a href="grid.html">Grid</a></li>
                            <li><a href="panel.html">Panel</a></li>
                            <li><a href="block.html">Block</a></li>
                            <li><a href="article.html">Article</a></li>
                            <li><a href="comment.html">Comment</a></li>
                            <li><a href="utility.html">Utility</a></li>
                            <li><a href="flex.html">Flex</a></li>
                            <li><a href="cover.html">Cover</a></li>

                            <li class="uk-nav-header">Navigations</li>
                            <li><a href="nav.html">Nav</a></li>
                            <li><a href="navbar.html">Navbar</a></li>
                            <li><a href="subnav.html">Subnav</a></li>
                            <li><a href="breadcrumb.html">Breadcrumb</a></li>
                            <li><a href="pagination.html">Pagination</a></li>
                            <li><a href="tab.html">Tab</a></li>
                            <li><a href="thumbnav.html">Thumbnav</a></li>

                            <li class="uk-nav-header">Elements</li>
                            <li><a href="list.html">List</a></li>
                            <li><a href="description-list.html">Description list</a></li>
                            <li><a href="table.html">Table</a></li>
                            <li><a href="form.html">Form</a></li>

                            <li class="uk-nav-header">Common</li>
                            <li><a href="button.html">Button</a></li>
                            <li><a href="icon.html">Icon</a></li>
                            <li><a href="close.html">Close</a></li>
                            <li><a href="badge.html">Badge</a></li>
                            <li><a href="alert.html">Alert</a></li>
                            <li><a href="thumbnail.html">Thumbnail</a></li>
                            <li><a href="overlay.html">Overlay</a></li>
                            <li><a href="text.html">Text</a></li>
                            <li><a href="column.html">Column</a></li>
                            <li><a href="animation.html">Animation</a></li>
                            <li><a href="contrast.html">Contrast</a></li>

                            <li class="uk-nav-header">JavaScript</li>
                            <li><a href="dropdown.html">Dropdown</a></li>
                            <li><a href="modal.html">Modal</a></li>
                            <li><a href="offcanvas.html">Off-canvas</a></li>
                            <li><a href="switcher.html">Switcher</a></li>
                            <li><a href="toggle.html">Toggle</a></li>
                            <li class="uk-active"><a href="scrollspy.html">Scrollspy</a></li>
                            <li><a href="smooth-scroll.html">Smooth scroll</a></li>

                        </ul>

                    </div>
                    <div class="tm-main uk-width-medium-3-4">

                        <article class="uk-article">

                            <h1 id="bottom" class="uk-article-title">Scrollspy</h1>

                            <p class="uk-article-lead">Trigger events and animations while scrolling your page.</p>

                            <h2 id="usage"><a href="#usage" class="uk-link-reset">Usage</a></h2>

                            <p>The scrollspy component listens to page scrolling and triggers events based on the scroll position. For example, if you scroll down a page and an element appears the first time in the viewport you can trigger a smooth animation to fade in the element. Just add the <code>data-uk-scrollspy</code> attribute and the following options.</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-text-nowrap">
                                    <thead>
                                        <tr>
                                            <th>Data attribute</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>cls:'MY-CLASS'</code></td>
                                            <td>Applies the class only the first time the element appears in the viewport.</td>
                                        </tr>
                                        <tr>
                                            <td><code>repeat: true</code></td>
                                            <td>Applies the class every time the element appears in the viewport.</td>
                                        </tr>
                                        <tr>
                                            <td><code>delay:600</code></td>
                                            <td>Adds a delay in milliseconds to the animation.</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <p>Typically, classes from the <a href="animation.html">Animation component</a> are used together with the scrollspy.</p>

                            <h3 class="tm-article-subtitle">Examples</h3>

                            <p>This example uses the <code>repeat: true</code> option. Scroll up and down to see the triggered animations.</p>

                            <div class="uk-grid">
                                <div class="uk-width-medium-1-4">
                                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-fade', repeat: true}">
                                        <h3>Fade</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="uk-grid">
                                <div class="uk-width-medium-1-4 uk-push-1-4">
                                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-scale-up', repeat: true}">
                                        <h3>Scale up</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="uk-grid">
                                <div class="uk-width-medium-1-4 uk-push-2-4">
                                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-scale-down', repeat: true}">
                                        <h3>Scale down</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="uk-grid">
                                <div class="uk-width-medium-1-4 uk-push-3-4">
                                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-top', repeat: true}">
                                        <h3>Slide top</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="uk-grid">
                                <div class="uk-width-medium-1-4 uk-push-2-4">
                                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-bottom', repeat: true}">
                                        <h3>Slide bottom</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="uk-grid">
                                <div class="uk-width-medium-1-4 uk-push-1-4">
                                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-right', repeat: true}">
                                        <h3>Slide right</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                </div>
                            </div>

                            <div class="uk-grid">
                                <div class="uk-width-medium-1-4">
                                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-left', repeat: true}">
                                        <h3>Slide left</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                </div>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div data-uk-scrollspy="{cls:'uk-animation-fade'}"&gt;...&lt;/div&gt;

&lt;div data-uk-scrollspy="{cls:'uk-animation-fade', repeat: true}"&gt;...&lt;/div&gt;

&lt;div data-uk-scrollspy="{cls:'uk-animation-fade', delay:900}"&gt;...&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="groups"><a href="#groups" class="uk-link-reset">Groups</a></h2>

                            <p>You can also group scrollspy elements, so you won't have to apply the data attribute to each of them. Just add the <code>data-uk-scrollspy"{target:'MY-CLASS'}"</code> attribute to a container element, targetting the selector the items you want to animate within the container. When using a delay it will be applied cumulatively to the items within the row that scrolls into view. The delay will be resetted for the next row within the group when it scrolls into view.</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-grid" data-uk-grid-margin data-uk-scrollspy="{cls:'uk-animation-fade uk-invisible', target:'> div > .uk-panel', delay:300, repeat: true}">
                                <div class="uk-width-medium-1-4">
                                    <div class="uk-panel uk-panel-box uk-invisible">
                                        <h3 class="uk-panel-title">Item</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                </div>
                                <div class="uk-width-medium-1-4">
                                    <div class="uk-panel uk-panel-box uk-invisible">
                                        <h3 class="uk-panel-title">Item</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                </div>
                                <div class="uk-width-medium-1-4">
                                    <div class="uk-panel uk-panel-box uk-invisible">
                                        <h3 class="uk-panel-title">Item</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                </div>
                                <div class="uk-width-medium-1-4">
                                    <div class="uk-panel uk-panel-box uk-invisible">
                                        <h3 class="uk-panel-title">Item</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                </div>
                                <div class="uk-width-medium-1-4">
                                    <div class="uk-panel uk-panel-box uk-invisible">
                                        <h3 class="uk-panel-title">Item</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                </div>
                                <div class="uk-width-medium-1-4">
                                    <div class="uk-panel uk-panel-box uk-invisible">
                                        <h3 class="uk-panel-title">Item</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                </div>
                                <div class="uk-width-medium-1-4">
                                    <div class="uk-panel uk-panel-box uk-invisible">
                                        <h3 class="uk-panel-title">Item</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                </div>
                                <div class="uk-width-medium-1-4">
                                    <div class="uk-panel uk-panel-box uk-invisible">
                                        <h3 class="uk-panel-title">Item</h3>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                    </div>
                                </div>
                            </div>

                            <h3 class="tm-article-subtitle">Example</h3>

<pre><code>&lt;div data-uk-scrollspy="{cls:'uk-animation-fade', target:'.my-class', delay:300}"&gt;

    &lt;!-- This item has no delay --&gt;
    &lt;div class="my-class"&gt;...&lt;/div&gt;

    &lt;!-- This item has a delay of 300ms --&gt;
    &lt;div class="my-class"&gt;...&lt;/div&gt;

    &lt;!-- This item has a delay of 600ms --&gt;
    &lt;div class="my-class"&gt;...&lt;/div&gt;

&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="javascript-options"><a href="#javascript-options" class="uk-link-reset">JavaScript options</a></h2>

                            <p>This is an example of how to set options via attribute:</p>

                            <pre><code>data-uk-scrollspy=&quot;{cls:'uk-animation-fade'}&quot;</code></pre>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-table-striped">
                                    <thead>
                                        <tr>
                                            <th>Option</th>
                                            <th>Possible value</th>
                                            <th>Default</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>cls</code></td>
                                            <td>string</td>
                                            <td>'uk-scrollspy-inview'</td>
                                            <td>Class to add when the element is in view.</td>
                                        </tr>
                                        <tr>
                                            <td><code>initcls</code></td>
                                            <td>string</td>
                                            <td>'uk-scrollspy-init-inview'</td>
                                            <td>Class to add when the element is in view for the first time.</td>
                                        </tr>
                                        <tr>
                                            <td><code>topoffset</code></td>
                                            <td>integer</td>
                                            <td>0</td>
                                            <td>Top offset before triggering in view.</td>
                                        </tr>
                                        <tr>
                                            <td><code>leftoffset</code></td>
                                            <td>integer</td>
                                            <td>0</td>
                                            <td>Left offset before triggering in view.</td>
                                        </tr>
                                        <tr>
                                            <td><code>repeat</code></td>
                                            <td>boolean</td>
                                            <td>false</td>
                                            <td>Applies the in view class every time the element appears in the viewport.</td>
                                        </tr>
                                        <tr>
                                            <td><code>delay</code></td>
                                            <td>integer</td>
                                            <td>0</td>
                                            <td>Delay time in ms.</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>


                            <h3>Events</h3>

                            <p>You can bind callbacks to following events for custom functionality:</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-table-striped">
                                    <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>init.uk.scrollspy</code></td>
                                            <td>Triggered when the element is initially in the viewport.</td>
                                        </tr>
                                        <tr>
                                            <td><code>inview.uk.scrollspy</code></td>
                                            <td>Triggered when the element is in the viewport.</td>
                                        </tr>
                                        <tr>
                                            <td><code>outview.uk.scrollspy</code></td>
                                            <td>Triggered when the element leaves the viewport.</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <h3 class="tm-article-subtitle">Example</h3>

<pre><code>$('[data-uk-scrollspy]').on('inview.uk.scrollspy', function(){
    // custom code...
});
</code></pre>

                            <hr class="uk-article-divider">

                            <h2 id="scrollspy-nav"><a href="#scrollspy-nav" class="uk-link-reset">Scrollspy Nav</a></h2>

                            <p>To automatically update the active menu item in a menu depending on the scroll position of your site, just add the data attribute <code>data-uk-scrollspy-nav</code> to any navigation. Each menu item must link to the ID of its corresponding part of the site.</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table">
                                    <thead>
                                        <tr>
                                            <th>Data attribute</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>data-uk-scrollspy-nav</code></td>
                                            <td>Triggers the JavaScript necessary for the functionality of the scrollspy nav.</td>
                                        </tr>
                                        <tr>
                                            <td><code>data-uk-scrollspy-nav="{closest:'MY-SELECTOR'}"</code></td>
                                            <td>Looks for the closest element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.</td>
                                        </tr>
                                        <tr>
                                            <td><code>data-uk-scrollspy-nav="{smoothscroll:true}"</code></td>
                                            <td>Applies the <a href="smooth-scroll.html">Smooth scroll component</a> when skipping between different sections of the site.</td>
                                        </tr>
                                        <tr>
                                            <td><code>data-uk-scrollspy-nav="{cls:'MY-CLASS'}"</code></td>
                                            <td>By default ScrollspyNav toggles the <code>uk-active</code> class. Use the <code>cls</code> option to use your own class name.</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <p>For an example of the scrollspy nav, just check out our <a href="../tests/core/scrollspy.html">Scrollspy test page</a>.

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;ul class="uk-nav uk-nav-side" data-uk-scrollspy-nav="{closest:'li', smoothscroll:true}"&gt;
    &lt;li&gt;&lt;a href="#my-id"&gt;...&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#my-id2"&gt;...&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div id="my-id"&gt;...&lt;/div&gt;
&lt;div id="my-id2"&gt;...&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h3 id="javascript-scrollspy-nav-options"><a href="#javascript-scrollspy-nav-options" class="uk-link-reset">JavaScript options</a></h3>

                            <p>This is an example of how to set options via attribute:</p>

                            <pre><code>data-uk-scrollspy-nav=&quot;{smoothscroll:true}&quot;</code></pre>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-table-striped">
                                    <thead>
                                        <tr>
                                            <th>Option</th>
                                            <th>Possible value</th>
                                            <th>Default</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>cls</code></td>
                                            <td>string</td>
                                            <td>'uk-active'</td>
                                            <td>Class to add to active element</td>
                                        </tr>
                                        <tr>
                                            <td><code>closest</code></td>
                                            <td>CSS selector</td>
                                            <td>false</td>
                                            <td>Element selector to which to apply the active class</td>
                                        </tr>
                                        <tr>
                                            <td><code>topoffset</code></td>
                                            <td>integer</td>
                                            <td>0</td>
                                            <td>Scroll top-offsset</td>
                                        </tr>
                                        <tr>
                                            <td><code>leftoffset</code></td>
                                            <td>integer</td>
                                            <td>0</td>
                                            <td>Scroll left-offsset</td>
                                        </tr>
                                        <tr>
                                            <td><code>smoothscroll</code></td>
                                            <td>boolean</td>
                                            <td>false</td>
                                            <td>Scroll animation</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>


                            <h3>Events</h3>

                            <div class="uk-overflow-container">
                                <table class="uk-table uk-table-striped uk-text-nowrap">
                                    <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Parameter</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>init.uk.scrollspy</code></td>
                                            <td>event</td>
                                            <td>On scrollspy first init</td>
                                        </tr>
                                        <tr>
                                            <td><code>inview.uk.scrollspy</code></td>
                                            <td>event</td>
                                            <td>Element entered view-port</td>
                                        </tr>
                                        <tr>
                                            <td><code>outview.uk.scrollspy</code></td>
                                            <td>event</td>
                                            <td>Element left view-port</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>


                        </article>

                    </div>
                </div>

            </div>
        </div>

        <div class="tm-footer">
            <div class="uk-container uk-container-center uk-text-center">

                <ul class="uk-subnav uk-subnav-line uk-flex-center">
                    <li><a href="http://github.com/uikit/uikit">GitHub</a></li>
                    <li><a href="http://github.com/uikit/uikit/issues">Issues</a></li>
                    <li><a href="http://github.com/uikit/uikit/blob/master/CHANGELOG.md">Changelog</a></li>
                    <li><a href="https://twitter.com/getuikit">Twitter</a></li>
                </ul>

                <div class="uk-panel">
                    <p>Made by <a href="http://www.yootheme.com">YOOtheme</a> with love and caffeine.<br>Licensed under <a href="http://opensource.org/licenses/MIT">MIT license</a>.</p>
                    <a href="../index.html"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>
                </div>

            </div>
        </div>

        <div id="tm-offcanvas" class="uk-offcanvas">

            <div class="uk-offcanvas-bar">

                <ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav="{multiple:true}">
                    <li class="uk-parent"><a href="#">Documentation</a>
                        <ul class="uk-nav-sub">
                            <li><a href="documentation_get-started.html">Get started</a></li>
                            <li><a href="documentation_how-to-customize.html">How to customize</a></li>
                            <li><a href="documentation_layouts.html">Layout examples</a></li>
                            <li><a href="core.html">Core</a></li>
                            <li><a href="components.html">Components</a></li>
                            <li><a href="documentation_project-structure.html">Project structure</a></li>
                            <li><a href="documentation_less-sass.html">Less &amp; Sass files</a></li>
                            <li><a href="documentation_create-a-theme.html">Create a theme</a></li>
                            <li><a href="documentation_create-a-style.html">Create a style</a></li>
                            <li><a href="documentation_customizer-json.html">Customizer.json</a></li>
                            <li><a href="documentation_javascript.html">JavaScript</a></li>
                            <li><a href="documentation_custom-prefix.html">Custom prefix</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">Core</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-wrench"></i> Defaults</a>
                        <ul class="uk-nav-sub">
                            <li><a href="base.html">Base</a></li>
                            <li><a href="print.html">Print</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> Layout</a>
                        <ul class="uk-nav-sub">
                            <li><a href="grid.html">Grid</a></li>
                            <li><a href="panel.html">Panel</a></li>
                            <li><a href="block.html">Block</a></li>
                            <li><a href="article.html">Article</a></li>
                            <li><a href="comment.html">Comment</a></li>
                            <li><a href="utility.html">Utility</a></li>
                            <li><a href="flex.html">Flex</a></li>
                            <li><a href="cover.html">Cover</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> Navigations</a>
                        <ul class="uk-nav-sub">
                            <li><a href="nav.html">Nav</a></li>
                            <li><a href="navbar.html">Navbar</a></li>
                            <li><a href="subnav.html">Subnav</a></li>
                            <li><a href="breadcrumb.html">Breadcrumb</a></li>
                            <li><a href="pagination.html">Pagination</a></li>
                            <li><a href="tab.html">Tab</a></li>
                            <li><a href="thumbnav.html">Thumbnav</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-check"></i> Elements</a>
                        <ul class="uk-nav-sub">
                            <li><a href="list.html">List</a></li>
                            <li><a href="description-list.html">Description list</a></li>
                            <li><a href="table.html">Table</a></li>
                            <li><a href="form.html">Form</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> Common</a>
                        <ul class="uk-nav-sub">
                            <li><a href="button.html">Button</a></li>
                            <li><a href="icon.html">Icon</a></li>
                            <li><a href="close.html">Close</a></li>
                            <li><a href="badge.html">Badge</a></li>
                            <li><a href="alert.html">Alert</a></li>
                            <li><a href="thumbnail.html">Thumbnail</a></li>
                            <li><a href="overlay.html">Overlay</a></li>
                            <li><a href="text.html">Text</a></li>
                            <li><a href="column.html">Column</a></li>
                            <li><a href="animation.html">Animation</a></li>
                            <li><a href="contrast.html">Contrast</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent uk-active"><a href="#"><i class="uk-icon-magic"></i> JavaScript</a>
                        <ul class="uk-nav-sub">
                            <li><a href="dropdown.html">Dropdown</a></li>
                            <li><a href="modal.html">Modal</a></li>
                            <li><a href="offcanvas.html">Off-canvas</a></li>
                            <li><a href="switcher.html">Switcher</a></li>
                            <li><a href="toggle.html">Toggle</a></li>
                            <li><a href="scrollspy.html">Scrollspy</a></li>
                            <li><a href="smooth-scroll.html">Smooth scroll</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">Components</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> Layout</a>
                        <ul class="uk-nav-sub">
                            <li><a href="grid-js.html">Dynamic Grid</a></li>
                            <li><a href="grid-parallax.html">Parallax Grid</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> Navigations</a>
                        <ul class="uk-nav-sub">
                            <li><a href="dotnav.html">Dotnav</a></li>
                            <li><a href="slidenav.html">Slidenav</a></li>
                            <li><a href="pagination-js.html">Dynamic Pagination</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> Common</a>
                        <ul class="uk-nav-sub">
                            <li><a href="form-advanced.html">Form advanced</a></li>
                            <li><a href="form-file.html">Form file</a></li>
                            <li><a href="form-password.html">Form password</a></li>
                            <li><a href="form-select.html">Form select</a></li>
                            <li><a href="placeholder.html">Placeholder</a></li>
                            <li><a href="progress.html">Progress</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i> JavaScript</a>
                        <ul class="uk-nav-sub">
                            <li><a href="lightbox.html">Lightbox</a></li>
                            <li><a href="autocomplete.html">Autocomplete</a></li>
                            <li><a href="datepicker.html">Datepicker</a></li>
                            <li><a href="htmleditor.html">HTML editor</a></li>
                            <li><a href="slider.html">Slider</a></li>
                            <li><a href="slideset.html">Slideset</a></li>
                            <li><a href="slideshow.html">Slideshow</a></li>
                            <li><a href="parallax.html">Parallax</a></li>
                            <li><a href="accordion.html">Accordion</a></li>
                            <li><a href="notify.html">Notify</a></li>
                            <li><a href="search.html">Search</a></li>
                            <li><a href="nestable.html">Nestable</a></li>
                            <li><a href="sortable.html">Sortable</a></li>
                            <li><a href="sticky.html">Sticky</a></li>
                            <li><a href="timepicker.html">Timepicker</a></li>
                            <li><a href="tooltip.html">Tooltip</a></li>
                            <li><a href="upload.html">Upload</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-divider"></li>
                    <li><a href="../showcase/index.html">Showcase</a></li>
                    <li><a href="tutorials.html">Tutorials</a></li>
                </ul>

            </div>

        </div>

    </body>
</html>
